<script setup>
import { computed, ref } from 'vue';

import { ElButton, ElDialog, ElInput, ElOption, ElSelect } from 'element-plus';

const props = defineProps({
  modelValue: Boolean, // 控制对话框显隐
  // eslint-disable-next-line vue/require-default-prop
  sceneTypes: Array, // 场景类型列表
});

const emit = defineEmits(['update:modelValue', 'confirm']);

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
});

const sceneType = ref('');
const DASceneName = ref('');
const DTSceneName = ref('');
// 逻辑还待修改-DAS迁移结束后
const sceneName = computed({
  get: () =>
    sceneType.value === 'DAS' ? DASceneName.value : DTSceneName.value,
  set: (val) => {
    if (sceneType.value === 'DAS') {
      DASceneName.value = val;
    } else {
      DTSceneName.value = val;
    }
  },
});

const closeDialog = () => {
  visible.value = false;
};
const handleConfirm = () => {
  emit('confirm', { sceneType: sceneType.value, sceneName: sceneName.value });
  closeDialog();
};
</script>

<template>
  <ElDialog
    draggable
    v-model="visible"
    width="400px"
    align-center
    destroy-on-close
    class="rounded-lg bg-white p-6 shadow-xl"
  >
    <template #header>
      <div class="flex items-center justify-between border-b pb-2">
        <h4 class="text-lg font-semibold">
          {{ $t('scenes.createScene') }}
        </h4>
      </div>
    </template>

    <div class="mx-auto w-11/12 space-y-4 py-6">
      <div class="flex items-center gap-6">
        <label class="whitespace-nowrap text-sm font-medium"> 场景类型: </label>
        <ElSelect
          v-model="sceneType"
          :placeholder="$t('scenes.scenarioTypePlaceholder')"
          class="w-full"
        >
          <ElOption
            v-for="typeItem in sceneTypes"
            :key="typeItem.id"
            :label="typeItem.label"
            :value="typeItem.value"
          />
        </ElSelect>
      </div>

      <div
        v-if="sceneType === 'DAS' || sceneType === 'DTS'"
        class="flex items-center gap-6"
      >
        <label class="whitespace-nowrap text-sm font-medium"> 场景名称: </label>
        <ElInput
          v-model="sceneName"
          placeholder="请输入场景名称"
          clearable
          class="w-full"
        />
      </div>
    </div>

    <template #footer>
      <div class="flex justify-end gap-2">
        <ElButton
          type="primary"
          @click="handleConfirm"
          class="rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
        >
          确定
        </ElButton>
        <ElButton
          @click="closeDialog"
          class="rounded-md bg-gray-300 px-4 py-2 hover:bg-gray-400"
        >
          取消
        </ElButton>
      </div>
    </template>
  </ElDialog>
</template>
